<template>
	<!-- titlt部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoIndex"></image>
		<view class="titlebox-titlebox">打车加油</view>
		<view class="titlebox-search-box">
			<image class="titlebox-search-box-serchimg" src="../../static/搜索.png"></image>
			<input type="text" placeholder="搜索加油站">
		</view>
	</view>

	<!-- 轮播图部分 -->
	<view class="swiperbox">
		<swiper class="swiper-style" indicator-dots autoplay interval="3000" circular>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="../../static/滴滴出行.png"></image>
			</swiper-item>
		</swiper>
	</view>

	<!-- tips -->
	<view class="tips">
		<view class="tipbox">
			<view class="tipbox-topbox">
				<view class="tipbox-topbox-text">中海山加油站（国营）</view>
				<image class="tipbox-topbox-azimuthimg" src="../../static/定位.png"></image>
				<view class="tipbox-topbox-kilometre">3.0km</view>
			</view>
			<view class="tipbox-position">南环路152号</view>

			<view class="tipbox-buttombox">
				<view class="tipbox-buttombox-price">￥6.76</view>
				<view class="tipbox-buttombox-expenses">油站油价￥7.89</view>
			</view>
		</view>

		<view class="tipbox">
			<view class="tipbox-topbox">
				<view class="tipbox-topbox-text">中海山加油站（国营）</view>
				<image class="tipbox-topbox-azimuthimg" src="../../static/定位.png"></image>
				<view class="tipbox-topbox-kilometre">3.0km</view>
			</view>
			<view class="tipbox-position">南环路152号</view>

			<view class="tipbox-buttombox">
				<view class="tipbox-buttombox-price">￥6.76</view>
				<view class="tipbox-buttombox-expenses">油站油价￥7.89</view>
			</view>
		</view>

		<view class="tipbox">
			<view class="tipbox-topbox">
				<view class="tipbox-topbox-text">中海山加油站（国营）</view>
				<image class="tipbox-topbox-azimuthimg" src="../../static/定位.png"></image>
				<view class="tipbox-topbox-kilometre">3.0km</view>
			</view>
			<view class="tipbox-position">南环路152号</view>

			<view class="tipbox-buttombox">
				<view class="tipbox-buttombox-price">￥6.76</view>
				<view class="tipbox-buttombox-expenses">油站油价￥7.89</view>
			</view>
		</view>

		<view class="tipbox">
			<view class="tipbox-topbox">
				<view class="tipbox-topbox-text">中海山加油站（国营）</view>
				<image class="tipbox-topbox-azimuthimg" src="../../static/定位.png"></image>
				<view class="tipbox-topbox-kilometre">3.0km</view>
			</view>
			<view class="tipbox-position">南环路152号</view>

			<view class="tipbox-buttombox">
				<view class="tipbox-buttombox-price">￥6.76</view>
				<view class="tipbox-buttombox-expenses">油站油价￥7.89</view>
			</view>
		</view>

		<view class="tipbox">
			<view class="tipbox-topbox">
				<view class="tipbox-topbox-text">中海山加油站（国营）</view>
				<image class="tipbox-topbox-azimuthimg" src="../../static/定位.png"></image>
				<view class="tipbox-topbox-kilometre">3.0km</view>
			</view>
			<view class="tipbox-position">南环路152号</view>

			<view class="tipbox-buttombox">
				<view class="tipbox-buttombox-price">￥6.76</view>
				<view class="tipbox-buttombox-expenses">油站油价￥7.89</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	/* title部分样式 */
	.titlebox {
		display: flex;
		align-items: center;
		padding: 2%;
		background: rgb(241, 224, 84);
	}

	.titlebox-backimg {
		display: block;
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.titlebox-titlebox {
		font-size: 15px;
		color: black;
		margin-right: 25px;
	}

	.titlebox-search-box {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 2% 0%;
		border-radius: 30px;
		border: 1px solid #eee;
		background: white;
	}

	.titlebox-search-box-serchimg {
		width: 20px;
		height: 20px;
		display: block;
		margin-left: 10px;
		margin-right: 10px;
	}

	/* 轮播图样式 */
	.swiperbox {
		background: linear-gradient(to bottom, rgb(241, 224, 84), #F6F6F6 90%);
		margin-bottom: 5px;
	}

	.swiper-style {
		width: 95%;
		margin: 0 auto;
		background: white;
		border-radius: 10px;
	}

	.swiper-image {
		width: 100%;
		/* 图片宽度 */
		height: 100%;
		/* 图片高度 */
		object-fit: cover;
		/* 确保图片覆盖整个区域，不留空白 */
	}

	/* tips部分 */
	.tips {
		padding: 2% 0 20%;
	}

	.tipbox {
		padding: 2%;
		background: white;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.tipbox-topbox {
		display: flex;
		align-items: center;
		padding: 0 2%;
	}

	.tipbox-topbox-text {
		font-size: 15px;
		flex: 1;
	}

	.tipbox-topbox-azimuthimg {
		width: 25px;
		height: 25px;
		display: block;
	}

	.tipbox-topbox-kilometre {
		font-size: 15px;
		color: rgb(140, 130, 130);
	}

	.tipbox-position {
		font-size: 13px;
		margin-bottom: 20px;
		padding: 0 2%;
		color: rgb(160, 160, 160);
	}

	.tipbox-buttombox {
		display: flex;
		align-items: flex-end;
		padding: 0 2%;
	}

	.tipbox-buttombox-price {
		font-size: 20px;
		margin-right: 5px;
		color: rgb(240, 95, 80);
	}

	.tipbox-buttombox-expenses {
		font-size: 12px;
		color: rgb(160, 160, 160);
	}
</style>
